<template>
    <div>
        <ul>
            <li class="card">
                <p class="title">卷帘</p>
                <div class="btn">
                    <p>
                        <el-switch v-model="value1" inactive-text="OFF">
                        </el-switch>
                    </p>
                    <p>
                        <el-switch v-model="value2" inactive-text="ON">
                        </el-switch>
                    </p>
                    <p>
                        <el-button
                            type="primary"
                            v-show="value2"
                            style="pointer-events: none"
                            >运行</el-button
                        >
                        <el-button
                            type="danger"
                            v-show="value1"
                            style="pointer-events: none"
                            >停止</el-button
                        >
                    </p>
                </div>
                <div class="block">
                    <el-slider v-model="val1"></el-slider>
                    <span class="demonstration">卷起</span>
                    <span class="demonstration">铺开</span>
                </div>
            </li>
            <li class="card">
                <p class="title">风口</p>
                <div class="btn">
                    <p>
                        <el-switch v-model="value3" inactive-text="OFF">
                        </el-switch>
                    </p>
                    <p>
                        <el-switch v-model="value4" inactive-text="ON">
                        </el-switch>
                    </p>
                    <p>
                        <el-button type="primary" v-show="value4"
                            >运行</el-button
                        >
                        <el-button type="danger" v-show="value3"
                            >停止</el-button
                        >
                    </p>
                </div>
                <div class="block">
                    <el-slider v-model="val2"></el-slider>
                    <span class="demonstration">关闭</span>
                    <span class="demonstration">打开</span>
                </div>
            </li>
            <li class="card">
                <p class="title">喷灌</p>
                <div class="btn">
                    <p>
                        <el-switch v-model="value5" inactive-text="OFF">
                        </el-switch>
                    </p>
                    <p>
                        <el-switch v-model="value6" inactive-text="ON">
                        </el-switch>
                    </p>
                    <p>
                        <el-button type="primary" v-show="value6"
                            >运行</el-button
                        >
                        <el-button type="danger" v-show="value5"
                            >停止</el-button
                        >
                    </p>
                </div>
                <div class="block">
                    <el-slider v-model="val3"></el-slider>
                    <span class="demonstration">关闭</span>
                    <span class="demonstration">打开</span>
                </div>
            </li>
            <li class="card">
                <p class="title">滴灌</p>
                <div class="btn">
                    <p>
                        <el-switch v-model="value7" inactive-text="OFF">
                        </el-switch>
                    </p>
                    <p>
                        <el-switch v-model="value8" inactive-text="ON">
                        </el-switch>
                    </p>
                    <p>
                        <el-button type="primary" v-show="value8"
                            >运行</el-button
                        >
                        <el-button type="danger" v-show="value7"
                            >停止</el-button
                        >
                    </p>
                </div>
                <div class="block">
                    <el-slider v-model="val4"></el-slider>
                    <span class="demonstration">关闭</span>
                    <span class="demonstration">打开</span>
                </div>
            </li>
            <li class="card">
                <p class="title">补光灯</p>
                <div class="btn">
                    <p>
                        <el-switch v-model="value9" inactive-text="OFF">
                        </el-switch>
                    </p>
                    <p>
                        <el-switch v-model="value10" inactive-text="ON">
                        </el-switch>
                    </p>
                    <p>
                        <el-button type="primary" v-show="value10"
                            >运行</el-button
                        >
                        <el-button type="danger" v-show="value9"
                            >停止</el-button
                        >
                    </p>
                </div>
                <div class="block">
                    <el-slider v-model="val5"></el-slider>
                    <span class="demonstration">关闭</span>
                    <span class="demonstration">打开</span>
                </div>
            </li>
            <li class="card"></li>
        </ul>
    </div>
</template>

<script>
import eventBus from "@t/eventBus"
export default {
    data() {
        return {
            value1: false,
            value2: true,
            value3: false,
            value4: true,
            value5: false,
            value6: true,
            value7: false,
            value8: true,
            value9: true,
            value10: false,
            val1: 20,
            val2: 30,
            val3: 40,
            val4: 50,
            val5: 0,
        }
    },
    watch: {
        value1(newValue) {
            // console.log(newValue)
            this.value2 = !newValue
            if (newValue) {
                this.val1 = 0
            } else {
                this.val1 = 50
            }
        },
        value2(newValue) {
            // console.log(newValue)
            this.value1 = !newValue
        },
        value3(newValue) {
            // console.log(newValue)
            this.value4 = !newValue
            if (newValue) {
                this.val2 = 0
            } else {
                this.val2 = 50
            }
        },
        value4(newValue) {
            // console.log(newValue)
            this.value3 = !newValue
        },
        value5(newValue) {
            // console.log(newValue)
            this.value6 = !newValue
            if (newValue) {
                this.val3 = 0
            } else {
                this.val3 = 50
            }
        },
        value6(newValue) {
            // console.log(newValue)
            this.value5 = !newValue
        },
        value7(newValue) {
            // console.log(newValue)
            this.value8 = !newValue
            if (newValue) {
                this.val4 = 0
            } else {
                this.val4 = 50
            }
        },
        value8(newValue) {
            // console.log(newValue)
            this.value7 = !newValue
        },
        value9(newValue) {
            // console.log(newValue)
            this.value10 = !newValue
            if (newValue) {
                this.val5 = 0
            } else {
                this.val5 = 50
            }
        },
        value10(newValue) {
            // console.log(newValue)
            this.value9 = !newValue
        },
        val1(newValue) {
            // console.log(newValue);
            if (!newValue) {
                this.value1 = true
            } else {
                this.value1 = false
            }
        },
        val2(newValue) {
            // console.log(newValue);
            if (!newValue) {
                this.value3 = true
            } else {
                this.value3 = false
            }
        },
        val3(newValue) {
            // console.log(newValue);
            if (!newValue) {
                this.value5 = true
            } else {
                this.value5 = false
            }
        },
        val4(newValue) {
            // console.log(newValue);
            if (!newValue) {
                this.value7 = true
            } else {
                this.value7 = false
            }
        },
        val5(newValue) {
            // console.log(newValue);
            if (!newValue) {
                this.value9 = true
            } else {
                this.value9 = false
            }
        },
    },
    mounted() {
        eventBus.$on("dengOn", () => {
            this.val1 = 20
            this.val2 = 40
            this.val3 = 90
            this.val4 = 10
            this.val5 = 50
        })
        eventBus.$on("dengOff", () => {
            this.val1 = 20
            this.val2 = 30
            this.val3 = 40
            this.val4 = 60
            this.val5 = 0
        })
        eventBus.$on("turnOn", () => {
            this.val1 = 80
            this.val2 = 80
            this.val3 = 50
            this.val4 = 70
            this.val5 = 0
        })
    },
}
</script>

<style lang="less" scoped>
ul {
    width: 1128px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .card:nth-of-type(3n) {
        margin-right: 0;
    }
    .card:first-child {
        background-image: url(../img/kongzhiye_07.png);
    }
    .card:nth-child(2) {
        background-image: url(../img/kongzhiye_13.png);
    }
    .card:nth-child(3) {
        background-image: url(../img/kongzhiye_16.png);
    }
    .card:nth-child(4) {
        background-image: url(../img/kongzhiye_33.png);
    }
    .card:nth-child(5) {
        background-image: url(../img/kongzhiye_27.png);
    }
    .card:last-child {
        background-image: url(../img/kongzhiye_30.png);
        background-position: 50%;
    }
    .card {
        width: 360px;
        height: 284px;
        background-color: #ffffff;
        border-radius: 10px;

        background-repeat: no-repeat;
        background-position: 90px;
        overflow: hidden;
        margin-right: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        .title {
            font-size: 14px;
            font-weight: 600;
            color: #425276;
            padding-left: 10px;
            border-left: 3px solid #425276;
            margin-left: 19px;
            margin-top: 20px;
        }
        .btn {
            margin-left: 246px;
            /deep/.el-button {
                width: 55px;
                height: 25px;

                text-align: center;
            }
            p {
                margin-bottom: 20px;
            }
            p:last-child {
                margin-bottom: 81px;
            }
            .el-button+.el-button {
                margin-left: 0px;
            }
        }
        /deep/.block {
            width: 290px;
            margin: 0 auto;
            .el-slider__runway {
                width: 90%;
                margin: 0 auto 10px auto;
            }
            .demonstration {
                color: #46557b;
                font-size: 14px;
                font-weight: 600;
            }
            .demonstration:last-child {
                float: right;
            }
        }
    }
}
</style>